<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no;email=no" name="format-detection">
    <title>楚才书店</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/module/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="../../static/css/plugin/iconfont.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/module/slider.css">
    <link rel="stylesheet" href="../../static/css/page/store.css">
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header class="hidden-xs">
        <nav class="mainnav">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                        <ul class="nav nav-pills topnav" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="#">活动报名</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">楚才书店</a>
                            </li>
                            <li class="logo-item">
                                <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">个人中心</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">登录/注册</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 正文内容 -->
    <!--轮播区域-->
    <div id="bannerArea" class="banner">
        <div class="banner__img">
            <a href="javascript:"><img src="../../static/images/banner_mall.png" width="100%" height="532" alt="广告位"></a>
            <a href="javascript:"><img src="../../static/images/banner.png" width="100%" height="532" alt="广告位"></a>
            <a href="javascript:"><img src="../../static/images/banner_mall.png" width="100%" height="532" alt="广告位"></a>
            <a href="javascript:"><img src="../../static/images/banner.png" width="100%" height="532" alt="广告位"></a>
            <a href="javascript:"><img src="../../static/images/banner_mall.png" width="100%" height="532" alt="广告位"></a>
        </div>
        <ul class="banner__nav" id="bannerNav">
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <!-- 商品列表 -->
    <div class="container">
        <div class="main-content main-content--mall">
            <div class="mall-header clearfix">
                <h3 class="pull-left">楚才书店&gt所有商品</h3>
                <div class="cart-wrapper pull-right js-cart-wrapper">
                    <a class="cart-link" href="javascript:;">
                        <span class="cart-link__left">
                            <i class="iconfont">&#xe600;</i> 购物车
                            <span class="cart-link__number">3</span>
                        </span>
                        <span class="cart-link__right">
                            <span class="triangle triangle--right"></span>
                        </span>
                    </a>
                    <div class="cart-content js-cart-content" style="display: none;">
                        <div class="cart-list">
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品夜莺《萤火虫小巷》作者最新作品夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="cart-settlement">
                            <span class="cart-settlement__amount">
                                共
                                <em>3</em>
                                件商品
                            </span>
                            <em class="cart-settlement__total">¥<span>60</span></em>
                            <a class="cart-settlement__btn pull-right" href="#">去结算</a>
                        </div>
                    </div>
                </div>
                <a class="price-rank pull-right" href="javascript:;">
                    价格
                    <span class="triangle triangle--up"></span>
                    <span class="triangle triangle--down"></span>
                </a>
            </div>
            <div class="mall-list">
                <div class="mall-item">
                    <a href="#" target="_blank">
                        <div class="media">
                            <div class="media-left mall-item__img">
                                <img src="../../static/images/book.png" width="401" height="344" alt="书">
                            </div>
                            <div class="media-body mall-item__body">
                                <div class="mall-item__info">
                                    <h4 class="media-heading mall-item__name">夜莺（《萤火虫小巷》作者最新作品，女性版《辛德勒的名单》，媲美《所有我们看不见的光》</h4>
                                    <div class="mall-item__price">
                                        <em>¥20</em>
                                        <del>¥58</del>
                                    </div>
                                    <div class="btn-groups mall-item__look">
                                        <span class="btn btn-submit btn-submit--look">去看看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mall-item">
                    <a href="#" target="_blank">
                        <div class="media">
                            <div class="media-left mall-item__img">
                                <img src="../../static/images/book.png" width="401" height="344" alt="书">
                            </div>
                            <div class="media-body mall-item__body">
                                <div class="mall-item__info">
                                    <h4 class="media-heading mall-item__name">夜莺（《萤火虫小巷》作者最新作品，女性版《辛德勒的名单》，媲美《所有我们看不见的光》</h4>
                                    <div class="mall-item__price">
                                        <em>¥20</em>
                                        <del>¥58</del>
                                    </div>
                                    <div class="btn-groups mall-item__look">
                                        <span class="btn btn-submit btn-submit--look">去看看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mall-item">
                    <a href="#" target="_blank">
                        <div class="media">
                            <div class="media-left mall-item__img">
                                <img src="../../static/images/book.png" width="401" height="344" alt="书">
                            </div>
                            <div class="media-body mall-item__body">
                                <div class="mall-item__info">
                                    <h4 class="media-heading mall-item__name">夜莺（《萤火虫小巷》作者最新作品，女性版《辛德勒的名单》，媲美《所有我们看不见的光》</h4>
                                    <div class="mall-item__price">
                                        <em>¥20</em>
                                        <del>¥58</del>
                                    </div>
                                    <div class="btn-groups mall-item__look">
                                        <span class="btn btn-submit btn-submit--look">去看看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mall-item">
                    <a href="#" target="_blank">
                        <div class="media">
                            <div class="media-left mall-item__img">
                                <img src="../../static/images/book.png" width="401" height="344" alt="书">
                            </div>
                            <div class="media-body mall-item__body">
                                <div class="mall-item__info">
                                    <h4 class="media-heading mall-item__name">夜莺（《萤火虫小巷》作者最新作品，女性版《辛德勒的名单》，媲美《所有我们看不见的光》</h4>
                                    <div class="mall-item__price">
                                        <em>¥20</em>
                                        <del>¥58</del>
                                    </div>
                                    <div class="btn-groups mall-item__look">
                                        <span class="btn btn-submit btn-submit--look">去看看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 底部 -->
    <footer class="hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                    <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
            </div>
        </div>
    </footer>

    <script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
    <script src="../../static/js/lib/bootstrap.min.js"></script>
    <script src="../../static/js/module/slider.js"></script>
    <script>
        $(function () {
            $(".js-cart-wrapper").hover(function () {
                $(this).find(".js-cart-content").show();
            }, function(){
                $(this).find(".js-cart-content").hide();
            });
        });
    </script>
</body>
</html>